import React, { useState } from 'react';

function Temp() {
    const [count, setCount] = useState(0);
    return (
        <div>
            <p>Your clicked {count} times</p>
            <button
                onClick={() => {
                    setCount(count + 1);
                }}
            ></button>
        </div>
    );
}

class Example extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            count: 0,
        };
    }

    render() {
        return (
            <div>
                <p>Your clicked {this.state.count} times</p>
                <button
                    onClick={() => {
                        this.setState({ count: this.count + 1 });
                    }}
                >
                    click me
                </button>
            </div>
        );
    }
}

// 你之前可能把它们叫做“无状态组件”。但现在我们为它们引入了使用 React state 的能力，所以我们更喜欢叫它”函数组件”。
const Example1 = (props) => {
    // 你可以在这使用 Hook
    return <div />;
};
function Example2(props) {
    // 你可以在这使用 Hook
    return <div />;
}
